<script lang="ts" setup>
import type { ServerList } from '#/api/iot/product/model';

import { ref, watch } from 'vue';

import { useVbenDrawer, useVbenModal } from '@vben/common-ui';
import { getVxePopupContainer } from '@vben/utils';

import {
  DeleteOutlined,
  EditOutlined,
  EyeOutlined,
  PlusOutlined,
} from '@ant-design/icons-vue';
import { message, Popconfirm } from 'ant-design-vue';

import {
  removeThingModel,
  thingModelSeverList,
} from '#/api/iot/product/thingModel';
import { $t } from '#/locales';

import modelAttributeTable from './model-attribute-table.vue';
import modelServiceFormModal from './model-service-formmodal.vue';
import modelTsl from './model-tsl.vue';

interface Props {
  tsl?: string;
  productId: string;
}

const props = defineProps<Props>();

// 服务列表
const serverList = ref<ServerList[]>([]);
const serverCheck = ref(0); // 选中服务的索引值
const blockId = ref(''); // 选中服务的ID
watch(
  () => props.productId,
  async (newProductId) => {
    if (newProductId) {
      getSeverList();
    }
  },
);

async function getSeverList() {
  serverList.value = await thingModelSeverList(props.productId);
  if (!blockId.value) {
    blockId.value = serverList.value[0]?.id as string;
  }
}

const [ModelServiceFormModal, drawerApi] = useVbenDrawer({
  connectedComponent: modelServiceFormModal,
});
const [ModelTsl, modaTsllApi] = useVbenModal({
  connectedComponent: modelTsl,
});
const [ModelAttributeTable] = useVbenModal({
  connectedComponent: modelAttributeTable,
});
// 选中服务列表
function handleCheckServe(id: string, index: number) {
  blockId.value = id;
  serverCheck.value = index;
}

// 新增服务列表
function handleAddSever() {
  drawerApi.setData({
    productId: props.productId,
  });
  drawerApi.open();
}
// 编辑服务列表数据
function handleEditSever(item: { id: string; productId: string }) {
  drawerApi
    .setData({
      id: item.id,
      productId: item.productId,
    })
    .open();
}
// 删除服务列表数据
async function handleDelete(id: string) {
  await removeThingModel(id);
  await getSeverList();
  message.success({
    content: $t('ui.actionMessage.deleteSuccess'),
    key: 'action_process_msg',
  });
}

// 物模型弹窗
function handleTsl() {
  modaTsllApi
    .setData({
      tsl: props.tsl,
      productId: props.productId,
    })
    .open();
}
</script>
<template>
  <div>
    <div class="mb-3">
      <a-button type="primary" @click="handleTsl">
        <EyeOutlined /> 物模型 TSL
      </a-button>
    </div>
    <!-- <Alert
      type="info"
      show-icon
      class="py-4px text-13px"
      message="产品模型用于描述设备具备的能力和特性。通过定义产品模型，在平台构建一款设备的抽象模型，使平台理解该款设备支持的服务、属性、命令等信息，如颜色、开关等。当定义完一款产品模型后，在进行注册设备时，就可以使用在控制台上定义的产品模型。"
    /> -->
    <div class="model-box">
      <div class="severListBox">
        <div class="title-box">
          <div class="title">功能模块</div>
          <div
            class="icon"
            v-access:code="['iot:block:add']"
            @click="handleAddSever"
          >
            <PlusOutlined />
          </div>
        </div>
        <div class="list-box">
          <div
            :class="serverCheck === index ? 'select list-item' : 'list-item'"
            v-for="(item, index) in serverList"
            @click="handleCheckServe(item.id, index)"
            :key="item.id"
          >
            <div class="left">
              <div class="title">{{ item.blockIdentifier }}</div>
              <div class="subtitle">{{ item.blockName }}</div>
            </div>
            <div class="right" v-show="index > 0">
              <div class="edit">
                <a-button
                  v-access:code="['iot:block:edit']"
                  type="link"
                  size="small"
                  :disabled="item.blockIdentifier === 'DEFAULT'"
                  @click.stop="handleEditSever(item)"
                >
                  <EditOutlined />
                </a-button>
              </div>
              <div class="delete">
                <Popconfirm
                  :get-popup-container="getVxePopupContainer"
                  title="是否要删除数据？"
                  @confirm.stop="handleDelete(item.id)"
                  @cancel.stop=""
                  placement="right"
                >
                  <a-button
                    type="link"
                    size="small"
                    :disabled="item.blockIdentifier === 'DEFAULT'"
                    danger
                    v-access:code="['iot:block:edit']"
                    @click.stop=""
                  >
                    <DeleteOutlined />
                  </a-button>
                </Popconfirm>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="attributeList">
        <ModelAttributeTable
          :product-id="props.productId || ''"
          :block-id="blockId"
        />
      </div>
    </div>
  </div>
  <ModelServiceFormModal
    @reload="getSeverList()"
    :product-id="props.productId || ''"
  />
  <ModelTsl />
</template>

<style lang="scss" scoped>
.model-box {
  display: flex;
  column-gap: 10px;
  margin-top: 20px;

  .severListBox {
    width: 20%;

    .title-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 8px;
      font-size: 16px;
      font-weight: bold;
      border-bottom: 1px solid #e5e7eb;

      .title {
        color: #333;
      }

      .icon {
        cursor: pointer;
      }
    }

    .list-box {
      display: flex;
      flex-direction: column;
      row-gap: 5px;
      width: 100%;
      margin-top: 10px;

      .list-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 6px 10px;
        cursor: pointer;
        border-radius: 10px;

        .left {
          .title {
            font-size: 15px;
            color: #333;
            word-break: break-all;
          }

          .subtitle {
            margin-top: 5px;
            font-size: 12px;
            color: #666;
            word-break: break-all;
          }
        }

        .right {
          display: flex;
          column-gap: 10px;
          align-items: center;
          font-size: 16px;
        }

        &.select {
          background-color: #f3f4f6;
        }

        &:hover {
          background-color: #f3f4f6;
        }
      }
    }
  }

  .attributeList {
    width: 80%;
  }
}
</style>
